<template>
  <el-dialog
    :before-close="handleClose"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
    :title="globalData.title"
    :visible.sync="isDialog.visible"
    width="700px"
  >
    <el-form
      ref="submitFormRef"
      :model="submitForm"
      :rules="submitFormRules"
      label-position="right"
      label-width="auto"
    >
      <el-form-item label="LOGO" prop="head_portrait_path">
        <el-upload
          :http-request="uploadImage"
          :show-file-list="false"
          action="#"
          list-type="picture-card"
        >
          <el-image
            v-if="submitForm.head_portrait_path"
            :src="submitForm.head_portrait_path"
            class="image-box"
          >
            <div slot="error" class="image-slot">
              <img alt="没有图片" src="@/assets/imgs/error-img.png" />
            </div>
          </el-image>
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
        <div>
          <span class="color-tips1">提示：请上传宽1:1的图片</span>
        </div>
      </el-form-item>

      <el-form-item label="类目" prop="cate_id">
        <el-select
          v-model="submitForm.cate_id"
          clearable
          placeholder="请选择类目"
          style="width: 100%"
        >
          <el-option
            v-for="(item, index) in globalData.cate_id"
            :key="item.cate_id"
            :label="item.name"
            :value="item.cate_id"
            style="width: 100%"
          >
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="名称" prop="name">
        <el-input
          v-model="submitForm.name"
          clearable
          placeholder="请输入名称"
          type="text"
        />
      </el-form-item>

      <el-form-item label="账号" prop="account">
        <el-input
          v-model="submitForm.account"
          clearable
          placeholder="请输入账号"
          type="text"
        />
      </el-form-item>

      <el-form-item v-if="!this.info" label="密码" prop="password">
        <el-input
          v-model="submitForm.password"
          clearable
          placeholder="请输入密码"
          type="password"
        />
      </el-form-item>

      <el-form-item label="排序" prop="sort">
        <el-slider v-model="submitForm.sort" :max="255" show-input></el-slider>
        <span class="form-tip">越小越靠前</span>
      </el-form-item>

      <el-form-item label="基础粉丝量" prop="fensi_base">
        <el-input
          v-model="submitForm.fensi_base"
          clearable
          placeholder="请输入基础粉丝量"
          type="number"
        />
      </el-form-item>

      <el-form-item label="联系方式" prop="contact">
        <el-input
          v-model="submitForm.contact"
          clearable
          placeholder="请输入联系方式"
          type="text"
        />
      </el-form-item>

      <el-form-item label="地址" prop="address">
        <el-input v-model="submitForm.address" disabled type="text"></el-input>
        <el-button size="mini" type="primary" @click="handleTarget({}, 'map')">
          选择地址
        </el-button>
      </el-form-item>
    </el-form>

    <div slot="footer">
      <el-button @click="handleClose">取消</el-button>
      <el-button
        :loading="isLoading.submit"
        type="primary"
        @click="handleSubmit"
      >
        确 定
      </el-button>
    </div>

    <!--编辑-->
    <Map
      v-if="isDialog.map"
      :info="dataInfo"
      :mode="globalData.mode"
      @close="closeDialog"
    ></Map>
  </el-dialog>
</template>

<script>
import { add, edit } from "@/api/provider";
import { lists as category } from "@/api/category";
import { upload as uploadFiles } from "@/api/image";
import Map from "./map.vue";

export default {
  name: "Edit",
  props: {
    info: {
      type: Object,
    },
  },
  components: {
    Map,
  },
  data() {
    return {
      // 表单提交
      submitForm: {
        head_portrait_path: "",
        cate_id: "",
        account: "",
        password: "",
        name: "",
        fensi_base: "",
        contact: "",
        address: "",
        add_lat: "",
        add_lon: "",
        sort: "",
      },
      // 表单验证
      submitFormRules: {
        head_portrait_path: [
          { required: true, message: "请上传LOGO", trigger: "blur" },
        ],
        cate_id: [{ required: true, message: "请选择类目", trigger: "blur" }],
        account: [{ required: true, message: "请输入账号", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        name: [{ required: true, message: "请输入名称", trigger: "blur" }],
        fensi_base: [
          { required: true, message: "请输入基础粉丝量", trigger: "blur" },
        ],
        contact: [
          { required: true, message: "请输入联系电话", trigger: "blur" },
        ],
        sort: [{ required: true, message: "请输入权重", trigger: "blur" }],
      },
      // 数据
      globalData: {
        title: "",
        mode: "",
        cate_id: [],
      },
      // 加载状态
      isLoading: {
        submit: false,
      },
      // 是否弹窗
      isDialog: {
        visible: true,
        map: false,
      },
    };
  },
  created() {
    this.getCategory();
    if (this.info) {
      this.globalData.title = "修改" + "(" + this.info.name + ")";
      this.getData();
    } else {
      this.globalData.title = "添加";
    }
  },
  methods: {
    // 分类
    getCategory() {
      category().then((res) => {
        this.globalData.cate_id = res.data.list;
      });
    },
    // 数据
    getData() {
      this.submitForm = {
        provider_id: this.info.provider_id,
        head_portrait_path: this.info.head_portrait_path,
        cate_id: this.info.cate_id.origin > 0 ? this.info.cate_id.origin : "",
        account: this.info.account,
        password: this.info.password,
        name: this.info.name,
        contact: this.info.contact,
        fensi_base: this.info.fensi_base,
        address: this.info.address,
        add_lat: this.info.add_lat,
        add_lon: this.info.add_lon,
        sort: Number(this.info.sort),
      };
    },
    // 提交
    handleSubmit() {
      this.$refs.submitFormRef.validate((valid) => {
        if (!valid) {
          return false;
        }
        this.isLoading.submit = true;

        if (this.info) {
          edit(this.submitForm)
            .then(() => {
              this.isLoading.submit = false;
              this.$emit("close");
            })
            .catch(() => {
              this.isLoading.submit = false;
            });
        } else {
          add(this.submitForm)
            .then(() => {
              this.isLoading.submit = false;
              this.$emit("close");
            })
            .catch(() => {
              this.isLoading.submit = false;
            });
        }
      });
    },
    // 跳转
    handleTarget(row = {}, mode) {
      switch (mode) {
        case "map":
          let mapCenter = [];
          if (this.submitForm.add_lon && this.submitForm.add_lat) {
            mapCenter = [this.submitForm.add_lon, this.submitForm.add_lat];
          } else {
            mapCenter = [116.4074, 39.9042];
          }
          this.dataInfo = {
            address: this.submitForm.address
              ? this.submitForm.address
              : "北京市",
            mapCenter: mapCenter,
          };
          this.globalData.mode = mode;
          this.isDialog.map = true;
          break;
      }
    },
    // 图片上传
    uploadImage(param) {
      const fileObj = param.file;
      const form = new FormData();
      form.append("file", fileObj);
      uploadFiles(form).then((res) => {
        this.submitForm.head_portrait_path = res.data.fileurl;
      });
    },
    //关闭
    closeDialog(val) {
      if (Object.keys(val).length > 0) {
        this.submitForm.address = val.address;
        this.submitForm.add_lon = val.mapCenter[0];
        this.submitForm.add_lat = val.mapCenter[1];
      }
      this.isDialog.map = false;
    },
    // 关闭
    handleClose() {
      this.$emit("close", "cancel");
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-textarea textarea {
  font-family: "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
}

::v-deep .tox-tinymce {
  min-height: 500px;
}

.image-box {
  width: 100%;
  height: 100%;
}
</style>
